<template>
  <TopHeaderNav />
  <div class="content-wrapper">
    <div class="page-content">
      <el-row>
        <el-col :span="12" :offset="4" class="timeline-content" v-loading="timeLineLoading">
          <template v-for="year in timeLine" :key="year">
            <div class="tl-year">
              <h2>{{year.year}} <small>年</small></h2>
              <template v-for="month in year.monthList" :key="month">
                <div class="tl-month">
                  <h3>{{month.month}} <small>月</small></h3>
                  <template v-for="item in month.itemList" :key="item">
                    <div class="tl-item">
                      <div class="item-bg"></div>
                      <router-link :to="{ name:'article', params: { articleId: item.articleId }}" :key="'Article'+item.articleId">
                        <div class="item-title"><span>{{Utils.formatDate(item.time,'MM.dd')}}</span>&nbsp;&nbsp;{{item.title}}</div>
                        <div class="item-content">
                          <div class="item-tag-box">
                            <template v-for="tag in item.tagList" :key="tag">
                              <div class="tag-item">
                                <span v-bind:style="`${tag.tagCss?tag.tagCss:''}`"><i v-bind:class="`${tag.tagIcon?tag.tagIcon:'fa fa-tag'}`"></i><small>&nbsp;{{ tag.tagName }}</small></span>
                              </div>
                            </template>
                          </div>
                          <p class="item-text">{{item.content}}</p>
                          <el-divider class="my-5"></el-divider>
                          <div class="item-info-box">
                            <div class="item-info-item"><i class="el-icon-time"></i> 创建日期 {{Utils.formatDate(item.time,'yyyy-MM-dd hh')}}<small>H</small></div>
                            <div class="item-info-item"><i class="el-icon-view"></i> {{item.viewCount}} 次浏览</div>
                            <div class="item-info-item"><i class="el-icon-thumb"></i> {{item.thumbCount}} 个点赞</div>
                          </div>
                        </div>
                      </router-link>
                    </div>
                  </template>
                </div>
              </template>
            </div>
          </template>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
  import TopHeaderNav from '@/components/TopHeaderNav'
  export default {
    components: {
      TopHeaderNav
    },
    data() {
      this.$axios.get('/api/article-service/article/timeline').then((timeLine) => {
        console.log(timeLine);
        this.timeLine = timeLine;
        setTimeout(() => {
          this.timeLineLoading = false;
        }, 1000);
      }).catch(() => {});
      return {
        timeLine: [],
        timeLineLoading: true
      }
    }
  }
</script>